<!--
 * @Author: DeluxePig 250293786@qq.com
 * @Date: 2024-06-05 23:17:14
 * @LastEditors: DeluxePig 250293786@qq.com
 * @LastEditTime: 2024-07-04 01:37:59
 * @FilePath: \easy-talk\src\views\home\index.vue
 * @Description: 充值表格
-->
<template>
  <div class="table-consume-box">
    <div class="table-containe">
      <BaseTable :columns="column" :table-data="tableData">
        <template #source_type="{ row }">
          {{ column[2].formatter(row.source_type) }}
        </template>
        <template #schedule_status="{ row }">
          {{ column[4].formatter(row) }}
        </template>
        <template #total_price="{ row }">
          ￥{{ row.total_price }}
        </template>
        <template #do="{ row }">
          <el-button v-if="row.schedule_status === 1000" type="text" size="small"
            @click="runTo('/account-info/order-pay', row)">
            立即支付
          </el-button>
          <el-button type="text" size="small" @click="runTo('/account-info/order-detail', row)">
            详情
          </el-button>
        </template>
      </BaseTable>
    </div>
    <Pagination :pagination-data="pageData" :page-sizes="[5, 10, 15, 20]" @paginationFun="changePage" />
  </div>
</template>

<script>
import { orderListApi } from '@/api/order'
import BaseTable from '@/components/bmp/table/index.vue'
import Pagination from '@/components/pagination/pagination'
export default {
  name: 'AccountTable',
  components: {
    BaseTable,
    Pagination
  },
  props: {
    contralData: {
      type: Object,
      default: function () {
        return {
          type: '',
          time: ''
        }
      }
    }
  },
  data() {
    return {
      column: [
        {
          prop: 'order_no',
          label: '订单号'
        },
        {
          prop: 'create_datetime',
          label: '创建时间'
        },
        {
          prop: 'source_type',
          label: '所属类型',
          formatter: function (data) {
            if (data == 10300) {
              return '视频渲染时长'
            } else if (data == 10400) {
              return '流量'
            } else if (data == 10500) {
              return '磁盘空间'
            } else if (data == 10000) {
              return '余额'
            } else {
              return '--'
            }
          }
        },
        {
          prop: 'total_price',
          label: '金额'
        },
        {
          prop: 'schedule_status',
          label: '状态',
          formatter: function (data) {
            if (data.closed_switch === 1) {
              return '已取消'
            } else {
              if (data.schedule_status === 1000) {
                return '待支付'
              } else if (data.schedule_status === 2000 || data.schedule_status === 4000) {
                return '支付成功'
              } else {
                return '--'
              }
            }
          }
        },
        {
          prop: 'do',
          label: '操作'
        }
      ],
      tableData: [
        {
          'id': 1424,
          'users_uniqueid': 'n6mbo00lqb0d0djwg4dx5bnuc3npmgqr',
          'order_no': '24051614445232750000000000010922', // 订单号 32位
          'total_price': '1.00', // 总额(分)
          'pay_result_data': {},
          'schedule_status': 1000, // 订单状态:1000=已下单,2000=已支付(前端回调),4000=已完成
          'mode_type': 0, // 订单支付方式 参照发起支付入参
          'source_type': 10300, // 订单类型 参照创建入参
          'payload': '10', // 载荷
          'closed_switch': 0, // 取消:0=否,1=是
          'create_datetime': '2024-05-16 14:44:52',
          'update_datetime': '2024-05-16 14:44:52'
        }
      ],
      pageData: {
        currentPage: 1,
        pageSize: 5,
        total: 0
      }
    }
  },
  computed: {},
  watch: {
    contralData: {
      handler() {
        this.getTableData()
      },
      immediate: true,
      deep: true
    }
  },
  created() {

  },
  methods: {
    chooseFun(item) {
      this.chooseTabs = JSON.parse(JSON.stringify(item))
    },
    getTableData() {
      let st = ''
      let et = ''
      if (this.contralData.time !== '' && this.contralData.time.length > 0) {
        st = this.contralData.time[0]
        et = this.contralData.time[1]
      }
      let source_type = '10000'
      switch (this.contralData.type) {
        case 'video_render_duration':
          source_type = '10300'; break
        case 'data_traffic_size':
          source_type = '10400'; break
        case 'disk_size':
          source_type = '10500'; break
        case 'cash_price':
          source_type = '10000'; break
        default: source_type = null; break
      }
      const data = {
        start_datetime: st,
        end_datetime: et,
        source_type: source_type,
        page_num: this.pageData.currentPage,
        limit_size: this.pageData.pageSize
      }
      orderListApi(data).then((res) => {
        this.tableData = res.data.data
        this.pageData.total = res.data.total
      })
    },
    changePage(val) {
      this.pageData.currentPage = val.currentPage
      this.pageData.pageSize = val.pageSize
      this.getTableData()
    },
    runTo(url, data) {
      this.$router.push({ path: url, query: { orderId: data.order_no } })
    }
  }
}
</script>

<style lang="scss" scoped>
.table-consume-box {
  width: 100%;
  height: 100%;

  .table-containe {
    width: 100%;
    height: calc(100% - 40px);
    margin-bottom: 10px;
  }
}
</style>
